<template>
	<div class="contract-container">
		<ShopHeader :isInput="dataArr.isInput" 
			:iconArr="dataArr.iconArr" 
			:placeholder="dataArr.placeholder"
			:aimUrl="dataArr.aimUrl"
			:rightUrl="dataArr.rightUrl"
		/>
		<div class="top-zhanwei"></div>
		<div class="item-content">
			<p :class="index%2===0?'content-list borderBot':'content-list'" v-for="(item,index) in itemArr " :key="index">
				<span>{{item}}</span>
				<i class="iconfont icon-iconfontyoujiantou"></i>
			</p>
		</div>
	</div>
</template>
<script>
	import ShopHeader from "../../components/shopheader"
	import  "../../assets/iconfont/iconfont.css"
	export default{
		name:'contract',
		data(){
			return{
				itemArr:[
					"保障房源",
					"在线签约"
				],
				dataArr:{
					isInput:false,
					iconArr:[
						{
							iconLeft:"icon-zuojiantou",
							iconRight:""
						}
					],
					placeholder:"我的合同",
					aimUrl:"/layout/mine",
					rightUrl:''
				}
			}
		},
		components:{
			ShopHeader
		}
	}
</script>
<style scoped lang="less">
	.contract-container{
		width: 100%;
		background-color: #fff;
		overflow: hidden;
		.top-zhanwei{
			width: 100%;
			height: 88 / 2 / 50rem;
		}
		.item-content{
			width: 95%;
			margin: 20 / 50rem auto;
			box-shadow: 0 0 10 / 50rem 1 / 50rem rgba(0,0,0,.1);
			border-radius: 10 / 2 / 50rem;
			p.borderBot{
				border-bottom: 2 / 50rem solid rgba(0,0,0,.1);
			}
			.content-list{
				width: 100%;
				color: #333;
				font-size: 13 / 50rem;
				font-weight: 700;
				padding: 28 / 2 / 50rem 20 / 2 / 50rem;
				box-sizing: border-box;
				position: relative;
				i{
					color: #f55;
					font-size: 16 / 50rem;
					position: absolute;
					right: 0;
					top: 30 / 2 / 50rem
				}
			}
		}
	}
</style>